<template>
    <div id="HeaderBar">
        <!-- 头部信息 -->
      <div class="header">
        <img src="../assets/images/icon1.png" alt="移动云">
        <div class="userInfo">
          <span>用户名:</span>
          <span>{{userName}}</span>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
        name:'HeaderBar',
        data() {
            return {
                userName:''
            }
        },
        created(){
          // 从后台获取用户名数据
          let userInfo=JSON.parse(window.sessionStorage.getItem('userInfo'));
          this.userName=userInfo.userName;
        }        
    }
</script>

<style scoped>
    .header{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height:50px;
      background: #1C2430;
      box-shadow: 0px 2px 4px 0px rgba(34,48,62,0.1);
    }
    .header>img{
      height:26.88px;
      margin-left: 20px;
      vertical-align: middle;
    }
    .header>.userInfo{
      width:160px;
      margin-right:20px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
    }
    .header>.userInfo>span:last-child{
      padding-left:5px;
    }
</style>